<template>
  <el-container class="main-container">
    <el-header height="60px">
      <!-- Header content -->
      <h1 class="title">我的消息</h1>
    </el-header>
    <el-main>
      <div class="content-wrapper">
        <!-- 无数据 -->
        <section class="no-data-wrap" v-show="data.total == 0">
          <em class="icon30 no-data-ico">&nbsp;</em>
          <a class="c-666 fsize14 ml10 vam" href="/course">这里空空如也...</a>
        </section>
        <div class="comment-wrapper">
          <el-card
            shadow="hover"
            class="comment-item"
            v-for="item in data.items"
            :key="item.id"
          >
            <div slot="header" class="clearfix">
              <span style="color: #2d9aff">{{ item.senderName }}</span>
              <span v-show="item.type == 0"> 在你的文章下面评论</span>
              <span v-show="item.type == 1"> 回复了你的评论</span>
              <span v-show="item.type == 2"> 在你的文章下面点赞</span>
              <nuxt-link
                v-show="item.type == 0 || item.type == 2"
                :to="'/article/' + item.link"
              >
                <el-button style="float: right; padding: 3px 0" type="text"
                  >点击查看</el-button
                >
              </nuxt-link>
            </div>
            <span>{{ item.content }}</span>
            <div class="el-icon-date" style="float: right">
              {{ momentFormat(item.createTime) }}
            </div>
          </el-card>
        </div>
        <div v-show="data.total > 0">
          <div class="paging">
            <!-- undisable这个class是否存在，取决于数据属性hasPrevious -->
            <a
              :class="{ undisable: !data.hasPrevious }"
              href="#"
              title="首页"
              @click.prevent="gotoPage(1)"
              >首</a
            >
            <a
              :class="{ undisable: !data.hasPrevious }"
              href="#"
              title="前一页"
              @click.prevent="gotoPage(data.current - 1)"
              >&lt;</a
            >
            <a
              v-for="page in data.pages"
              :key="page"
              :class="{
                current: data.current == page,
                undisable: data.current == page,
              }"
              :title="'第' + page + '页'"
              href="#"
              @click.prevent="gotoPage(page)"
              >{{ page }}</a
            >
            <a
              :class="{ undisable: !data.hasNext }"
              href="#"
              title="后一页"
              @click.prevent="gotoPage(data.current + 1)"
              >&gt;</a
            >
            <a
              :class="{ undisable: !data.hasNext }"
              href="#"
              title="末页"
              @click.prevent="gotoPage(data.pages)"
              >末</a
            >
            <div class="clear" />
          </div>
        </div>
      </div>
    </el-main>
  </el-container>
</template>
<script>
import messageApi from "@/api/message";
import "@/assets/css/message.less";
import moment from "moment";
moment.locale('zh-cn')
export default {
  asyncData({ params, error }) {
    return {
      memberId: params.id,
    };
  },
  data() {
    return {
      page: 1, //当前页
      limit: 8,
      data: {}, //课程列表
    };
  },
  created() {
    // TODO: 写成静态的了 到时候解开注释,把静态数据去掉
    this.initMyMessage();
  },
  methods: {
    initMyMessage() {
      messageApi
        .getMyMessageList(this.page, this.limit, this.memberId)
        .then((response) => {
          this.data = response.data.data;
        });
    },

    //分页切换的方法
    gotoPage(page) {
      messageApi
        .getMyMessageList(page, this.limit, this.memberId)
        .then((response) => {
          this.data = response.data.data;
        });
    },
    // toCoursePage(){
    //   this.$router.push({path:'/course'})
    // },
    momentFormat(dateStr) {
      return moment(new Date(dateStr)).startOf('millisecond').fromNow()
    }
  },
};
</script>
<style scoped>
li.active a {
  background: #409eff;
  border-radius: 10px;
  color: #fff;
}
li.active a:hover {
  background: #409eff;
  border-radius: 10px;
  color: #fff;
}
li a:hover {
  color: #409eff;
}
li.current.bg-orange a:hover {
  color: white;
}
.hide {
  display: none;
}
.show {
  display: block;
}
.img-responsive {
  width: 100%;
}

.container {
  min-height: 100vh;
}
</style>
